<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
    <date-format :date="new Date()" >
        <template #default="a">
            {{a.year}}年{{a.month}}月{{a.dates}}日
        </template>
    </date-format>

<!--    // 如果组件内部只有一个默认插槽-->
    <date-format :date="new Date()"  #default="a">
        {{a.year}}年{{a.month}}月{{a.dates}}日
    </date-format>
</div>
<script>
    Vue.component("dateFormat",{
        props:["date"],
        template:`
            <span>
                <slot :year="date.getFullYear()"
                      :month="date.getMonth() + 1"
                      :dates="date.getDate()">{{date}}</slot>
            </span>
        `
    })
    var v = new Vue({
        el:"#app",
    })
</script>
</body>
</html>